<template>
	<div class="MenuBar">
		<ul>
			<li>
				<router-link to="/">
					<span class="iconfont">&#xe600;</span>
					<span class="text">首页</span>
				</router-link>
			</li>
			<li>
				<router-link to="/Classify">
					<span class="iconfont">&#xe615;</span>
					<span class="text">分类</span>
				</router-link>
			</li>
			<li>
				<router-link to="/ShopCar">
					<span class="iconfont">&#xe610;</span>
					<span class="text">购物车</span>
				</router-link>
			</li>
			<li>
				<router-link to="/User">
					<span class="iconfont">&#xe606;</span>
					<span class="text">我</span>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		
	}
</script>

<style lang="scss" scoped>
	.MenuBar{
		width:100%;
		height: 100px;
		position: fixed;
		bottom:0;
		border-top: 2px solid #eee;
		background: #fff;
	}
	.MenuBar ul{
		width:inherit;
		height: inherit;
		display: flex;
	}
	.MenuBar ul li{
		width:25%;
	}
	.MenuBar ul li a{
		width:100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.MenuBar ul li a span{
		display: block;
		margin:7px 0;
		color:#666;
	}
	.MenuBar ul li a .iconfont{
		font-size: 23px;
	}
	.router-link-exact-active .iconfont{
		color: #ff9900;
	}
	.router-link-exact-active .text{
		color: #ff9900;
	}
</style>